<template>
	<view >
		
	<h1>测试文字</h1>
	<view class="text" :style="`background-color:${ui_data?.data?.bgcolor} ;color:${ui_data.data?.textcolor};line-height:${ui_data.data.size*1.5}rpx ;font-size:${ui_data.data.size}rpx;`">
		有一天你听说，江河湖海，哪个都要更大更好。但你没有跳出去，后来的后来，喜庆话听厌了，蛤蟆不再有趣了，小鲫鱼也不再是女神了，一切熟悉又麻木。你跳出去了，后来的后来，记忆里的喜庆话更喜庆了，蛤蟆更有趣了，小鲫鱼永远都是女神了，但你已经回不去了。总要为诱惑做出些牺牲，总该为踏实舍得些精彩，你要是不跑出去你就会觉得池塘就是你的天堂，可是你已经去见过了大海啊，你回不了头了，只希望大海咸度刚好。
	</view>
	<view class="colorandsize">
		<view>
			<view class="shezhicolor">背景颜色</view>
			<view class="kuang">
				
				自定义:<input class="" v-model="ui_data.data.bgcolor" type="color">
			</view>
	
		</view>
		<view>
			<view class="shezhicolor">文字颜色</view>
			<view class="kuang">
				
				自定义:<input v-model="ui_data.data.textcolor" type="color">
			</view>
		</view>
		<view>
			<view class="shezhisize">字体大小</view>
			<view class="kuangs">
				<slider activeColor="#FFCC33" backgroundColor="#e4e4e4" block-color="#f50"
					:value="ui_data.data.size" @change="sliderChange" min="20" max="60" step="5" show-value />
			</view>
		</view>
	</view>
	</view>
</template>

<script setup>
	import {reactive, watch} from'vue'
	import {addtheme} from '@/api/users.js'
	import {useStore} from 'vuex'
	
	let store = useStore()
	let usersid = store?.state?.users?.id
	let ui_data = reactive({
		data: {}
	})
	const changeuidata = (id, size, textcolor, bgcolor) => {
		addtheme(id, size, textcolor, bgcolor)
	}
	
	if (store.state.theme == null) {
		ui_data.data = {
			textcolor: '#000000',
			bgcolor: '#ffffff',
			size: '35'
		}
		store.commit('updatetheme', ui_data.data)
		changeuidata(usersid, ui_data.data.size, ui_data.data.textcolor, ui_data.data.bgcolor)
	} else {
		ui_data.data = store.state.theme
		store.commit('updatetheme', ui_data.data)
		changeuidata(usersid, ui_data.data.size, ui_data.data.textcolor, ui_data.data.bgcolor)
	}
	

	const sliderChange = (e) => {
		ui_data.data.size = e.detail.value
	}
	const changeColor = watch(ui_data.data,(newval)=>{
		store.commit('updatetheme', newval)
		changeuidata(usersid, newval.size, newval.textcolor, newval.bgcolor)
	},{
		deep:true
	})
</script>

<style lang="scss" scoped>
	.text{
		width: 700rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}
	.colorandsize {
		width: 100vw;
		padding: 30rpx !important;
		background-color: #ffffff;
		z-index: 999;
		box-sizing: border-box;
		position: fixed;
		bottom: 0rpx;
		text-align: center;
		font-size: 30rpx;
		color: $color3 !important;
	
		.kuang {
			width: 690rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-around;
	
			input {
				height: 35rpx;
				width: 80rpx;
			}
	
			view {
				height: 35rpx;
				width: 80rpx;
				border: 1rpx solid #ff5500;
				border-radius: 10rpx;
				margin-left: 30rpx;
			}
		}
	
	
	
	}
</style>
